<template>
  <div>
      <p>拖拽文件到绿色区域</p>
      <img src="/favicon.ico" alt="Drop me">
      <div ref="dropZoneRef" class="useDropZone">
        <div> 是否拖拽到区域上方:{{isOverDropZone}}</div>
        <div>
          <div v-for="(file, index) in filesData" :key="index">
            <p>Name: {{ file.name }}</p>
            <p>Size: {{ file.size }}</p>
            <p>Type: {{ file.type }}</p>
            <p>Last modified: {{ file.lastModified }}</p>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
import { useDropZone } from '@vueuse/core'

export default {
  data() {
    return {
      isOverDropZone: false,
      filesData: [],
    };
  },
  mounted() {
    this.isOverDropZone = useDropZone(this.$refs.dropZoneRef,this.onDrop)
  },
  methods: {
    onDrop(files) {
      if (files) {
        this.filesData = files.map(file => ({
          name: file.name,
          size: file.size,
          type: file.type,
          lastModified: file.lastModified,
        }))
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.useDropZone {
  padding: 24px;
  background-color: aquamarine;
}
</style>
